<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../include/header.jsp" %>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function(){
	my_resist_list(0);
	my_class_list(0);	
});

function my_resist_list(offset){
	var param = "offset="+offset;
	$.ajax({
		type:"post",
		url:"${path}/member/my_resist_list.do",
		data:param,
		success:function(msg){
			$("#my_resist").html(msg);
		}		
	});
}
function my_class_list(offset){
	var param = "offset="+offset;
	$.ajax({
		type:"post",
		url:"${path}/member/my_class_list.do",
		data:param,
		success:function(msg){
			$("#my_class").html(msg);
		}		
	});
}






</script>


<!--  calendar -->
<script type="text/javascript">
$(document).ready(function(){
	calendar(0,0,0);
});

function preYear(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	calendar(y-1,m,d);
}

function nextYear(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	calendar(y+1,m,d);
}

function preMonth(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	if(d == 99){
		d = 1;
	}
	if((m-1) == -1){
		y = y-1;
		m = 12;
	}
	calendar(y,m-1,d);
}

function nextMonth(y,m,d){
	$('#calendar ul').remove();
	$('#calendar table').remove();
	if(d == 99){
		d = 1;
	}
	if((m+1) == 12){
		y = y+1;
		m = -1;
	}
	calendar(y,m+1,d);
}

function calendar(y,m,d)
{
	  var date = new Date();
	  var now = new Date();
	  var day = date.getDate();
	  if(y != 0){ //입력받은 년,월 정보로 date객체의 년,월 정보를 수정(day는 today 표시를 하지 않기위해 임의로 99로 지정함)
		  date.setFullYear(y);
		  if(m < 0){
			  m = 12;
		  }
		  date.setMonth(m);
		  date.setDate(1);
		  day = 99;
	  }

	  if(y != 0 && now.getMonth() == m && y == now.getFullYear()){ //현재 년월과 입력받은 년월이 같을때 date값은 오늘 날짜로 지정해서 today class설정이 되도록 한다.
		  day = now.getDate();
	  }
	  var month = date.getMonth();
	  var year = date.getYear();
	  var docu ="";	  
	  if(year<=200)
	  {
	          year += 1900;
	  }
	  var months = new Array('1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12');
	  var days_in_month = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
	  if(year%4 == 0 && year!=1900) //윤년
	  {
	          days_in_month[1]=29;
	  }
	  total = days_in_month[month];
	  var date_today = year+'.'+months[month];
	  var beg_j = date;
	  beg_j.setDate(1);
	  if(beg_j.getDate()==2)
	  {
	          beg_j=setDate(0);
	  }
	  beg_j = beg_j.getDay();
	  //docu+='<ul class="calMonth"><li class="mR8"><a href="#" onclick="preYear('+year+','+month+','+day+');" title="작년 ">작년</a></li><li><a href="#" onclick="preMonth('+year+','+month+','+day+');" title="이전달">이전달</a></li><li class="yearMonth">'+date_today+'월</li><li class="mR8"><a href="#" onclick="nextMonth('+year+','+month+','+day+');" title="다음달">다음달</a></li><li><a href="#" onclick="nextYear('+year+','+month+','+day+');" title="내년">내년</a></li></ul>';
	  docu+='<div style="width:100%;text-align:center;"><a href="#" onclick="preYear('+year+','+month+','+day+');" title="작년 ">◀ </a><a href="#" onclick="preMonth('+year+','+month+','+day+');" title="이전달">◁ </a>['+date_today+'월]<a href="#" onclick="nextMonth('+year+','+month+','+day+');" title="다음달"> ▷</a><a href="#" onclick="nextYear('+year+','+month+','+day+');" title="내년"> ▶</a></div>';
	  docu+='<table class="calTable" summary="일정" border="1" style="width: 280px;height:170px; margin:0 auto;"><colgroup><col width="15%" /><col width="14%" /><col width="14%" /><col width="14%" /><col width="14%" /><col width="14%" /><col width="15%" /></colgroup><thead><tr><th class="weekSun"><font color="red">일</font></th><th>월</th><th>화</th><th>수</th><th>목</th><th>금</th><th class="weekSat"><font color="blue">토</font></th></tr></thead>';
	  week = 0;
	  for(var i=1;i<=beg_j;i++)
	  {
	          docu+='<td></td>';
	          week++;
	  }
	  for(var i=1;i<=total;i++)
	  {
	          if(week==0)
	          {
	                  docu+='<tr>';
	          }
	          if(day==i && day!=99)
	          {
	                  docu+='<th class="today" style="background-color: black; color:white;">'+i+'</th>';
	          }
	          else
	          {
	          	if(week==0){
	          		docu+='<td class="weekSun"><font color="red">'+i+'</font></td>';
	          	}else if(week==6){
	          		docu+='<td class="weekSat"><font color="blue">'+i+'</font></td>';
	          	}else{
	          		docu+='<td>'+i+'</td>';
	          	}
	          }
	          week++;
	          if(week==7)
	          {
	                  docu+='</tr>';
	                  week=0;
	          }
	  }
	  for(var i=1;week!=0;i++)
	  {
	          docu+='<td></td>';
	          week++;
	          if(week==7)
	          {
	                  docu+='</tr>';
	                  week=0;
	          }
	  }
	  docu+='</tbody></table>';
	  //document.getElementById('cal').innerHTML = docu;
	  $('#calendar').html(docu);
	  return true;
}
</script>

</head>
<body>
	<hr style="border: solid black;">
	<table border="1" style="margin:0 auto; border:solid black; width: 900px; height: 200px;">
		<tr>
			<th colspan="2" style="color: white; background-color: black;">FAVORITE MEMBERS</th>
			<td rowspan="2" width="2"></td>
			<th colspan="2" style="color: white; background-color: black;">FAVORITE RECIPES</th>
			<td rowspan="2" width="2"></td>
			<td rowspan="2" >
				<div  id="calendar"  >
				
							
				
				
				</div>			
			</td>
					
		</tr>
		<tr>
			<th width="110">
				<select size="10" id="select_my_member" name="select_my_member" 
				style="width: 110px">
					<c:forEach var="row" items="${map.myMemberList }">
						<option value="${row.favorid }">
							${row.favorid }(${row.level })
						</option>
					</c:forEach>					
				</select>
			</th>
			<th width="100">
				<input type="button" value="회원정보" onclick="my_member_detail()"><br>
				<input type="button" value="레시피" onclick="my_member_recipe()"><br>
				<input type="button" value="강좌" onclick="my_member_class()"><br>
				<input type="button" value="!삭제" onclick="my_member_del()"> 
			</th>
			
			<th width="250" >
				<select size="10" id="select_my_recipe" name="select_my_recipe"
				style="width: 250px;" >
					<c:forEach var="row" items="${map.myRecipeList }">
						<option value="${row.idx }">
							<c:forEach begin="1" end="${row.rate}" >
							★
							</c:forEach>
							${row.subject }
						</option>
					</c:forEach>
				</select>
			</th>
			<th width="80">
				<input type="button" value="자세히" onclick="my_recipe_detail()"><br>
				<input type="button" value="!삭제" onclick="my_recipe_del()" >			
			</th>
		</tr>		
	</table>
	<hr  style="border: solid black;"/>
	<table style="margin:0 auto; width: 900px; border:solid black; height: 200px; " border="1">
		<tr style="color: white; background-color: black;" >
			<th width="50%" height="10%" >
				<font style="cursor: pointer; font-weight: bold; color: orange;">◀  </font>
				내가 수강한 강좌 목록
				<font style="cursor: pointer; font-weight: bold; color: orange;"> ▶</font>
			</th>
			<th  >
				<font style="cursor: pointer; font-weight: bold; color: orange;">◀  </font>
				내가 개설한 강좌 목록
				<font style="cursor: pointer; font-weight: bold; color: orange;"> ▶</font>
			</th>
		</tr>
		<tr>
			<td width="50%" height="90%" >
				<div id="my_resist" style="height: 100% " >
					
				</div>
			</td>
			<td  >
				<div id="my_class" style="height: 100% ">
					
				</div>
			</td>
		</tr>		
	</table>
</body>
</html>